<!DOCTYPE html>
<html ng-app="sample-app" id="ng-app" class="js">
<head lang="en">
    <meta charset="UTF-8">
    <title>Angular directive: lazy image directive, inspired by TIF - non lazy and own offset</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- look inside this css to see how container and ratios work -->
    <link rel="stylesheet" type="text/css" href="lazy-image-style.css" />
    <!-- only for our sample demo app -->
    <link rel="stylesheet" type="text/css" href="css/app.css" />

</head>
<body ng-controller="appCtrl" >

<div class="demo-wrapper">

	<h1>Angular lazy image directive</h1>
    <h2>Option to overrule offset and make it non lazy</h2>

    <div class="demo-sample">
    	
    	<p><span afkl-lazy-image="//placehold.it/480x240 480w, //placehold.it/440x220 768w" class="afkl-lazy-wrapper afkl-img-ratio-4-2 demo-image" afkl-lazy-image-options='{"nolazy": true}'></span></p>

    	<p><span afkl-lazy-image="//placehold.it/400x200" afkl-lazy-image-options='{"offset": 200}' class="afkl-lazy-wrapper afkl-img-ratio-4-2 demo-image"></span></p>

    </div>

</div>

<!-- only dependency is Angular -->
<script src="vendor/angular.min.js"></script>
<!-- our ng lazy image module -->
<script src="lazy-image.js"></script>

<!-- dummy app kickstarting our module -->
<script src="js/app.js"></script>

</body>
</html>
